<script>
export default {
  name: "MenDianComponent",
  data(){
      return{
        radio1:'全部门店',
        inputName:'',
        inputPhone:'',
        value1:[],
        menDian:{},

        dialogFormVisible:false,
        dialogFormVisibleBianJi:false,
        addressAll:[],
        address:[],
        xiangxidizhi:'',
        handleAvatarSuccess:'',
        beforeAvatarUpload:'',
        imageUrl:'',

        form: {
          name: '',
          region: '',
          phone:'',
          date1: '',
          date2: '',

          shopName:'',
          shopPhone:'',
          address:'',
          shopAddress:'',
          shopDescribe:'',
        },
        formLabelWidth: '120px',

      }
  },
  created() {
    this.axios.get("/shop/querySearchShopList", {
      params: {
        pageNum: 1,
        pageSize: 10,
        phone: "",
        keyword: "",
        shopStatus: "",
        startTime: "",
        endTime: "",
      }
    }).then((res) => {
      this.menDian = res.data.data;
    }).catch((err) => {
    })
    this.getAllProvinceAndCityList();
  },
  methods:{
    //搜索
    findMenDian() {
      let startTime1 = "";
      let endTime1 = "";
      if (this.value1.length > 0) {
        startTime1 = this.value1[0].getFullYear() + "-" + (this.value1[0].getMonth() + 1).toLocaleString('en-US', {
          minimumIntegerDigits: 2,
          useGrouping: false
        }) + "-" + this.value1[0].getDate().toLocaleString('en-US', {
          minimumIntegerDigits: 2,
          useGrouping: false
        }) + " 00:00:00";

        endTime1 = this.value1[1].getFullYear() + "-" + (this.value1[1].getMonth() + 1).toLocaleString('en-US', {
          minimumIntegerDigits: 2,
          useGrouping: false
        }) + "-" + this.value1[1].getDate().toLocaleString('en-US', {
          minimumIntegerDigits: 2,
          useGrouping: false
        }) + " 00:00:00";
      };

      this.axios.request("/shop/querySearchShopList", {
        params: {
          pageNum: "",
          pageSize: 10,
          phone: this.inputPhone,
          keyword: this.inputName,
          shopStatus: "",
          startTime: startTime1,
          endTime: endTime1,
        }
      }).then((res) => {
        this.menDian = res.data.data;
      }).catch((err) => {
      })
    },

    //添加
    newMenDian() {
      this.axios.post("/shop/addShop", {
        shopAddress: this.form.region,
        shopCity: this.address[1],
        shopDescribe: this.form.time,
        shopDistrict: this.address[2],
        shopImage: "",
        shopLatitude: this.xiangxidizhi.split(",")[0],
        shopLongitude: this.xiangxidizhi.split(",")[1],
        shopName: this.form.name,
        shopPhone: this.form.phone,
        shopProvince: this.address[0]

      }).then((res) => {
        console.log(res.data);
        this.menDian = res.data.data;
      }).catch((err) => {
      })
      alert("添加成功");
      window.location.reload();
    },

    //编辑门店
    clickBianJiMenDian(row){
      this.form.addTime = row.addTime;
      this.form.concernStatus = row.concernStatus;
      this.form.distance = row.distance;
      this.form.salesVolume = row.salesVolume;
      this.form.shopAccount = row.shopAccount;
      this.form.shopAddress = row.shopAddress;
      this.form.shopCategoryList = row.shopCategoryList;
      this.address = [row.shopProvince, row.shopCity,row.shopDistrict];
      this.form.shopCommunitySort = row.shopCommunitySort;
      this.form.shopDescribe = row.shopDescribe;
      this.form.shopGoodsList = row.shopGoodsList;
      this.form.shopId = row.shopId;
      this.form.shopImage = row.shopImage;
      this.xiangxidizhi = row.shopLatitude.toString() + ' '+row.shopLongitude.toString();
      this.form.shopName = row.shopName;
      this.form.shopOrderCount = row.shopOrderCount;
      this.form.shopPassword = row.shopPassword;
      this.form.shopPhone = row.shopPhone;
      this.form.shopSort = row.shopSort;
      this.form.shopStatus = row.shopStatus;
      this.form.shopUserId = row.shopUserId;
    },
    bianJiMenDian(){
        this.axios.post("/shop/modifyShop",{
          addTime: this.form.addTime,
          concernStatus: this.form.concernStatus,
          distance: this.form.distance,
          salesVolume: this.form.salesVolume,
          shopAccount: this.form.shopAccount,
          shopAddress: this.form.shopAddress,
          shopCategoryList: this.form.shopCategoryList,
          shopProvince: this.address[0],
          shopCity: this.address[1],
          shopDistrict: this.address[2],
          shopCommunitySort: this.form.shopCommunitySort,
          shopDescribe: this.form.shopDescribe,
          shopGoodsList: this.form.shopGoodsList,
          shopId: this.form.shopId,
          shopImage: this.form.shopImage,
          shopLatitude: this.xiangxidizhi[0],
          shopLongitude: this.xiangxidizhi[1],
          shopName: this.form.shopName,
          shopOrderCount: this.form.shopOrderCount,
          shopPassword: this.form.shopPassword,
          shopPhone: this.form.shopPhone,
          shopSort: this.form.shopSort,
          shopStatus: this.form.shopStatus,
          shopUserId: this.form.shopUserId,
        }).then((res) => {
          this.menDian = res.data.data;
        }).catch(() => { });
      alert("编辑成功");
      window.location.reload();
    },

    //卫星坐标
    weiXing () {
      let diZhi = this.address[0] + this.address[1] + this.address[2] + this.form.region
      if (diZhi != null && this.address.length > 0) {
        this.axios.get('https://restapi.amap.com/v3/geocode/geo', {
          params: {
            key: 'b1d31c19d90f91ff9f07aab5bbd5d9d1',
            address: diZhi,
          },
        }).then((res) => {
          this.xiangxidizhi = res.data.geocodes[0].location
        })
      } else {
        alert('请先填写地址')
      }

    },

    //获取省市
    getAllProvinceAndCityList () {

      // 获取全国所有省份和城市的列表
      var that = this
      this.$http.get('https://restapi.amap.com/v3/config/district', {
        // 高德地图的API
        params: {
          key: 'b1d31c19d90f91ff9f07aab5bbd5d9d1', // 这个是申请的 Key，读者自行写入
          keywords: '中国',
          subdistrict: 3,
          extensions: 'base',
        },
      }).then((response) => {
        console.log(response.data)

        for (let i = 0; i < response.data.districts[0].districts.length; i++) {
          let provinceMap = new Map()
          provinceMap.value = response.data.districts[0].districts[i].adcode   //区域编号
          provinceMap.label = response.data.districts[0].districts[i].name     //省名称
          provinceMap.children = []
          that.addressAll.push(provinceMap)  //添加省份
          for (let j = 0; j < response.data.districts[0].districts[i].districts.length; j++) {
            let cityMap = new Map()
            cityMap.value = response.data.districts[0].districts[i].districts[j].adcode   //区域编号
            cityMap.label = response.data.districts[0].districts[i].districts[j].name     //市名称
            cityMap.children = []
            provinceMap.children.push(cityMap) //添加市
            for (let k = 0; k < response.data.districts[0].districts[i].districts[j].districts.length; k++) {
              let areaMap = new Map()
              areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode   //区域编号
              areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name     //区县名称
              cityMap.children.push(areaMap)   //添加区县
            }
          }
        }
      })
    },

    //  分页
    nextOrLast(page){
      this.axios.request('/shop/querySearchShopList', {
        params:{
          pageNum: page,
          pageSize: 10,
          phone: '',
          keyword: '',
          shopStatus: "",
          startTime: '',
          endTime: '',
        }
      }).then((res) => {
        this.menDian = res.data.data;
      }).catch((err) => {})
    },

  },
}
</script>

<template>
<div class="mendian">
  <div class="top">
    <el-radio-group v-model="radio1">
      <el-radio-button label="全部门店"></el-radio-button>
      <el-radio-button label="上架中"></el-radio-button>
      <el-radio-button label="已下架"></el-radio-button>
    </el-radio-group>
  </div>
  <div class="center">
    门店名称：
    <el-input v-model="inputName" class="name1"></el-input>
    门店手机号：
    <el-input v-model="inputPhone" class="phone1"></el-input>
    <div class="block">
      <span class="demonstration">提交日期：</span>
      <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <el-button type="primary" @click="findMenDian">搜索</el-button>
  </div>

  <!--  弹框-->
  <div class="tanchuang">
    <el-button type="text" @click="dialogFormVisible = true" style="color: white">新增门店</el-button>
    <el-dialog title="门店新增"
               :visible.sync="dialogFormVisible"
               width="800px"
               align="left">
      <el-form :model="form">
        <el-form-item label="门店名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="门店头像" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="门店手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <div class="areabox">
          <span style="margin-right: 15px">所属地区</span>
          <el-cascader
              :options="addressAll"
              clearable
              v-model="address"
              :props="{value:'label'}">
          </el-cascader>
        </div>
        <el-input v-model="form.region" autocomplete="off"
                  style="margin-left: 120px;width: 640px;margin-bottom: 20px" placeholder="请输入详细地址"></el-input>
        <el-form-item label="门店坐标" :label-width="formLabelWidth">
          <el-button @click="weiXing">获取位置</el-button>
          {{ xiangxidizhi }}
        </el-form-item>
        <el-form-item label="营业时间" :label-width="formLabelWidth">
          <el-input v-model="form.time" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;newMenDian()">
          确认保存
        </el-button>
      </div>
    </el-dialog>
  </div>

<!--  修改门店资料-->
  <div>
    <el-dialog title="门店新增"
               :visible.sync="dialogFormVisibleBianJi"
               width="800px"
               align="left">
      <el-form :model="form">
        <el-form-item label="门店名称" :label-width="formLabelWidth">
          <el-input v-model="form.shopName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="门店头像" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="门店手机号" :label-width="formLabelWidth">
          <el-input v-model="form.shopPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属地区" :label-width="formLabelWidth" :default-value="address">
          <el-cascader :options="addressAll" clearable v-model="address"
                       :props="{ value: 'label' }"></el-cascader>
          <div style="margin: 10px 0"></div>
        </el-form-item>
        <el-input v-model="form.shopAddress" autocomplete="off"
                  style="margin-left: 120px;width: 640px;margin-bottom: 20px" placeholder="请输入详细地址"></el-input>
        <el-form-item label="门店坐标" :label-width="formLabelWidth">
          <el-button @click="weiXing">获取位置</el-button>
          {{ xiangxidizhi }}
        </el-form-item>
        <el-form-item label="营业时间" :label-width="formLabelWidth">
          <el-input v-model="form.shopDescribe" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleBianJi = false;bianJiMenDian()">
          确认保存
        </el-button>
      </div>
    </el-dialog>
  </div>

  <div class="content">
    <el-table
        :data="menDian.list"
        border
        :header-cell-style="{background:'#46a6ff','text-align':'center',color:'white'}"
        style="width: 1250px;margin-top: 20px">
      <el-table-column
          fixed
          prop="shopName"
          label="门店"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="shopId"
          label="id"
          align="center"
          width="100">
      </el-table-column>
      <el-table-column
          prop="shopPhone"
          label="门店手机号"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="shopAddress"
          label="门店地址"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="shopDescribe"
          label="营业时间"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="shopCommunitySort"
          label="关联小区"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="shopOrderCount"
          label="商品订单总数"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop=""
          label="提交方式"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="shopStatus"
          label="状态"
          align="center"
          width="140">
        <template slot-scope="scope">
            <span class="color-blue" v-if="scope.row.shopStatus === 1" style="color: #1E9FFF">
              上架中
            </span>
          <span class="color-blue" v-else-if="scope.row.shopStatus === 0" style="color: #1890FF">
              已下架
            </span>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="160">
        <template slot-scope="scope">
          <el-button @click="findId(scope.row)" type="text" size="small">门店管理
          </el-button>
          <el-button type="text" size="small" @click="dialogFormVisibleBianJi = true,clickBianJiMenDian(scope.row)">
            修改门店资料
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--分页部分-->
  <div class="fenye" style="margin: 20px 0;">
    <el-pagination
        :page-size="20"
        :pager-count="11"
        layout="prev, pager, next"
        :total = this.menDian.total
        @current-change = 'nextOrLast'>
    </el-pagination>
  </div>

</div>
</template>

<style scoped>
.mendian{
  padding: 20px 20px 20px 0;
  height: 800px;
}
.top {
  width: 100%;
  height: 40px;
}

.top > div {
  margin-right: 10px;
  float: left;
  cursor: pointer;
}
.name1, .phone1{
  display: inline-block;
  width: 200px;
  margin: 20px 25px 20px 0;
}
.center > div {
  display: inline-block;
}
.tanchuang {
  display: inline-block;
  background-color: #1890FF;
  font-size: 14px;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  width: 90px;
  height: 40px;
}
.areabox {
  margin-left: 50px;
  margin-bottom: 20px;
}
</style>